<template>
    <div class="home-con">
        <v-swper></v-swper>
        <div class="slider-demo">
            <ul>
                <a v-for="item in list2">
                    <img class="pic" v-lazy="item.imageUrl"></img>
                    <p>{{item.remark}}</p>
                </a>
            </ul>
        </div>

    
        <div class="fairyland">
            <a href="">
                <img class="pic" v-lazy="list3.imageUrl" alt="">
            </a>
        </div>

        <div class="fairyland-content">
            <a href="" class="fairyland-content-left">
                <img class="pic" v-lazy="list4[0]"  alt="">
            </a>
            <div class="fairyland-content-right">
                <a href=""><img class="pic" v-lazy="list4[1]" alt=""></a>
                <a href=""><img class="pic" v-lazy="list4[2]" alt=""></a>
            </div>
        </div>

        <div class="pic2">
            <img class="pic" v-lazy="list5" alt="">
        </div>

        <div class="supermarket">
            <a href="">
                <img class="pic" v-lazy="list6.imageUrl" alt="">
            </a>
        </div>
        <div class="supermarket-content">
            <ul class="supermarket-content">
                <li><a href=""><img class="pic" v-lazy="list7[0]" alt=""></a></li>
                <li><a href=""><img class="pic" v-lazy="list7[1]" alt=""></a></li>
                <li><a href=""><img class="pic" v-lazy="list7[2]" alt=""></a></li>
            </ul>
        </div>
        <div class="supermarket-content">
            <ul class="supermarket-content">
                <li><a href=""><img class="pic" v-lazy="list8[0]" alt=""></a></li>
                <li><a href=""><img class="pic" v-lazy="list8[1]" alt=""></a></li>
                <li><a href=""><img class="pic" v-lazy="list8[2]" alt=""></a></li>
            </ul>
        </div>

        <div class="pic2">
            <img class="pic" v-lazy="list9" alt="">
        </div>

        <div class="daily">
            <a href="">
                <img class="pic" v-lazy="list10.imageUrl" alt="">
            </a>
        </div>

        <div class="daily-content">
            <ul>
                <li>
                    <a href=""><img class="pic" v-lazy="list11[0]" alt=""></a>
                    <a href=""><img class="pic" v-lazy="list11[1]" alt=""></a>
                </li>
                 <li>
                    <a href=""><img class="pic" v-lazy="list11[2]" alt=""></a>
                    <a href=""><img class="pic" v-lazy="list11[3]" alt=""></a>
                    <a href=""><img class="pic" v-lazy="list11[4]" alt=""></a>
                </li>
            </ul>
        </div> 

        <div class="commodity"  v-for="obj in list15">
            <a href="" v-for="ite in obj.a.dataList">
                <img class="pic" v-lazy="ite.imageUrl" alt="">
            </a>
            <div class="particulars">
                <ul class="particulars">
                    <li v-for="item in obj.b.dataList"> 
                        <a href=""><img v-lazy="item.imageUrl" alt="" class="pic"></a>
                        <div class="product-name"> 
                            <span>{{ item.data.name}}</span>
                            <div class="price">
                                <div>￥<em>{{ (item.data.price/100).toFixed(2) }}</em></div>
                                <b>￥:{{ (item.data.promotionPrice/100).toFixed(2) }}</b>
                                
                                <div class="add">
                                    <i></i>
                                </div>
                            </div>  
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="commodity"  v-for="obj1 in list18">
            <a href="" v-for="ite in obj1.c.dataList">
                <img class="pic" v-lazy="ite.imageUrl" alt="">
            </a>
            <div class="particulars">
                <ul class="particulars">
                    <li v-for="item in obj1.d.dataList"> 
                        <a href=""><img v-lazy="item.imageUrl" alt="" class="pic"></a>
                        <div class="product-name"> 
                            <span>{{ item.data.name}}</span>
                            <div class="price">
                                <div>￥<em>{{(item.data.price/100).toFixed(2)}}</em></div>
                                <b>￥:{{( item.data.promotionPrice/100).toFixed(2)}}</b>
                                <div class="add">
                                    <i></i>
                                </div>
                            </div>  
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Swper from "../swper/index2";
    export default{
        components: {
            "v-swper":Swper
        },
        data(){
        return {
            // lists:[],
            list4:[],
            list6:[],
            list2:[],
            list3:[],
            list5:"",
            list7:[],
            list8:[],
            list9:[],
            list10:[],
            list11:[],
            list12:[],
            list13:[],
            list14:[],
            list15:[],
            list16:[],
            list17:[],
            list18:[],
            list19:[],
            obj:{},
            obj1:{}
        }
    },
    methods:{
        request(){
            this.$http.get("./static/data/ddcs.json")
            .then(function(req){
                //console.log(req.body.data.pageModules);
                // this.lists = req.body.data.pageModules;
                for(var i in req.body.data.pageModules[2].dataList){
                    this.list2.push(req.body.data.pageModules[2].dataList[i]);
                }
                
                this.list3 = req.body.data.pageModules[3].dataList[0];
            
                // console.log(this.lists);
                for(var i in req.body.data.pageModules[4].dataList){
                    this.list4.push(req.body.data.pageModules[4].dataList[i].imageUrl);
                }

                
                this.list5 = req.body.data.pageModules[5].dataList[0].imageUrl;
                this.list6 = req.body.data.pageModules[6].dataList[0];
                
                for(var i in req.body.data.pageModules[7].dataList){
                    this.list7.push(req.body.data.pageModules[7].dataList[i].imageUrl);
                }
                for(var i in req.body.data.pageModules[8].dataList){
                    this.list8.push(req.body.data.pageModules[8].dataList[i].imageUrl);
                }

                this.list9 = req.body.data.pageModules[9].dataList[0].imageUrl;

                this.list10 = req.body.data.pageModules[10].dataList[0];

                for(var i in req.body.data.pageModules[11].dataList){
                    this.list11.push(req.body.data.pageModules[11].dataList[i].imageUrl);
                }

               
                this.list12 = req.body.data.pageModules.slice(12,28);
                for (var i = 0; i < this.list12.length; i+=2) {
                    this.list13.push(this.list12[i]); 
                }
                for (var i = 1; i < this.list12.length; i+=2) {
                    this.list14.push(this.list12[i]);
                }
                console.log(this.list14);
                for(var i in this.list13){
                    this.obj.a = this.list13[i];
                    this.obj.b = this.list14[i];
                    this.list15.push(this.obj)
                    this.obj = {}
                }

                this.list19 = req.body.data.pageModules.slice(29,35);
                for (var i = 0; i < this.list19.length; i+=2) {
                    this.list16.push(this.list19[i]); 
                }
                for (var i = 1; i < this.list19.length; i+=2) {
                    this.list17.push(this.list19[i]);
                }
                for(var i in this.list16){
                    this.obj1.c = this.list16[i];
                    this.obj1.d = this.list17[i];
                    this.list18.push(this.obj1)
                    this.obj1 = {}
                }

            })
        }
    },
    created(){
        this.request()
    }

}
</script>

<style scoped>
    em,b,i{
        list-style: none;
    }
    img{
      -webkit-transition: all 2s;
      -o-transition: all 2s;
      transition: all 2s;
    }
    img[lazy=loading] {
      opacity: 0;
    }
    img[lazy=error] {

    }
    img[lazy=loaded] {
      opacity: 1;
    }
    .home-con{
          position:absolute;
          left:0;
          right:0;
          top:0.84rem;
          bottom:0;
          overflow:auto;
          background-color:#f6f6f6;

    }
    .slider-demo ul{
        display:flex;
        float: left;
        align-items:center;
        flex-wrap:wrap;
    }
    .slider-demo a{
        width:20%;
        height: auto;
        text-align:center;
        margin:0.1rem 0;
        background-color: #fff;
    }
    .slider-demo a img{
         width:100%;
         text-align:center;  
         float:left;  
    }
    .slider-demo a p{
        color: #888;
        font-size: 12px;
    }
    .pic{
        float: left;
        width: 100%;
        height: 100%;
    }
    .pic1 a,.fairyland a,.supermarket a,.daily a {
        display: flex;
        /*align-content:space-around;*/
        margin-top: 0.1rem;
        width: 100%;
        /*height: 1.15rem;*/
        height: auto;
    }
    .fairyland,.supermarket,.daily{
        /*height: 0.35rem;*/
        width: 100%;
        height: auto;
    }
    
    .fairyland-content{
        display: flex;
        width: 100%;
        /*height: 2.2rem;*/
        height: auto;
    }
    .fairyland-content-left{
        display: flex;
        width: 50%;
        /*height: 2.2rem;*/
        height: auto;
    }
    .fairyland-content-right{

        display: flex;
        flex-direction:column;
        width: 50%;
        /*height: 2.2rem;*/
        height: auto;
    }
    .fairyland-content-right a{
        display: flex;
        height: auto;
    }
    .pic2{
        width: 100%;
        height: auto;
        margin-top: 0.1rem;
    }

    .supermarket-content{
        width: 100%;
        /*height: 1.5rem;*/
        height: auto;
        display: flex;
    }
    .supermarket-content ul{
        display: flex;
    }
    .supermarket-content ul li {
        width: 33.33%;
    }
    .daily-content{
        width: 100%;
        display: flex;
    }
    .daily-content ul li{
        display: flex;
    }

    .commodity{
       width: 100%;
       /*display: flex;*/
    }
    .commodity a{
        width: 100%;
        /*height: 1.15rem;*/
        height: auto;
        margin-top: 0.1rem;
        display: flex;
    }
    
    .particulars {
        display: flex;
        flex-wrap: wrap;

        justify-content: space-around;
        align-content: space-around;
    }
    .particulars ul li{
        width: 33.33%;
        background-color: #fff;
        border: 1px solid #f6f6f6;
    }
    .particulars ul li a{
        display: flex;
        /*width: 95%;*/
        height: auto;
    }
    .particulars ul li img{
        /*float: left;*/
        width: 100%;
        /*height: auto;*/
    }
    .product-name{
        float: left;
        padding: 22px  0;
        width: 100%;
        text-indent: 5px;
    }
    .product-name span{
        display: block;
        height: 36px;
        margin-bottom: 10px;
        color: #21292b;
        font-size: 14px;
        line-height: 18px;
        width: 1rem;
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    }
    .price b{
        display: block;
        margin: 3px 0 2px;
        color: #ff712b;
        font-size: 12px;
        line-height: 1.2px;
    }
    .price em{
        color: grey;
        text-decoration: line-through;
        font-style: normal;
    }
    .add i{
        position: relative;
        left: 0.8rem;
        bottom: 0.2rem;
        background-image:url('../../common/img/sprt.png');
        background-position: -150px -150px;
        background-repeat: no-repeat;
        background-size: 400px auto;
        width: 30px;
        height: 30px;
        display: inline-block;
    }
</style> 

